<template>
  <div class="form__wrapper">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" :form-disabled="formDisabled" >
      <el-form-item label="预约ID">{{ detail.id }}</el-form-item>
      <el-form-item label="预约名称">{{ detail.name }}</el-form-item>
      <el-form-item label="审批说明：" prop="approveDesc" class="span-row">
        <el-input
          v-model="formData.approveDesc"
          type="textarea"
          :rows="5"
          placeholder="请输入审批说明，不超过200个字符">
        </el-input>
      </el-form-item>
      <el-form-item class="actions span-row">
        <el-button type="primary" size="medium" @click="submit(1)" :disabled="formDisabled">通过</el-button>
        <el-button type="danger" size="medium" @click="submit(2)" :disabled="formDisabled">驳回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import BaseForm from '@/components/BaseForm'

import { approveApi ,detailApi} from '@/api/modules/subscribe/service'

export default {
  name: 'ProductionCreate',
  components: { BaseForm },

  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {

      detail: {
        id: null,
        name: null,
        descInfo: null,
      },
      formData: {
        id: "",
        status: "",
        approveDesc: ""
      },
      
      formList: [
        { label: '预约ID', prop: 'id', placeholder: '不可修改' , disabled: 'true' },
        { label: '预约描述', prop: 'approveDesc',type: 'textarea', placeholder: '请输入预约描述' },
      ],

      formRules: {
        approveDesc: [
          { required: true, message: '预约描述不能为空', trigger: ['blur', 'change'] }
        ],
      },

      submitLoading: false,
      formDisabled: false
    }
  },
  methods: {
    async getDetail () {
      try {
        // const params = { id: this.id } 
        const res = await detailApi(this.id)
        this.detail = res.data
        this.$refs['form'].setFormData(this.detail)

        this.formDisabled = false
      } catch (err) {
        console.error(err)
      }
    },
    submit (status) {
      
      this.$refs['form'].validate(async valid => {
        if(valid) {
          try {
            this.submitLoading = true
            // const formData = this.$refs['form'].getFormData()
            const params = {
              id: this.detail.id,
              status: status,
              approveDesc: this.formData.approveDesc
            }
            await approveApi(params)
            this.$message({ type: 'success', message: '修改成功' })
            this.$router.go(0)
            this.$emit('close')
          } catch (err) {
            console.error(err)
          }
          this.submitLoading = false
          this.formDisabled = false
          this.$emit('success')
        }
      })
    },
    cancel () {
      this.$emit('close')
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
@import '../../../styles/form.less';
</style>